<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <link rel="stylesheet" href="选择器.css">
    <!--放在下面的 外部导入表 优先级高-->
    <title>选择器</title>
    <style type="text/css">
        /*body {background-color:yellow;}*/
        /*p {color:blue;}*/
        h1 {
            color: red;
        }
        .container strong {
            color: darkcyan;
        }
        .container>.row>h4>i {
            color: red;
            font-size: 16px;
        }
        #tt {
            font-style: italic;
        }

        .tt1 td{
            background: #666;
        }
        td.tt2{
            font-size: 16px;

        }
    </style>
</head>
<body>
<h1>这里是h1,被 head中定义样式控制,</h1>
<h2>这里是h2,被外部样式控制，优先级高于外部样式 （导入的CSS文件）</h2>
<h3 style="color: blue">这里是h3,被内联样式控制,元素STYLE定义</h3>

<h3 id="tt"> id 选择器</h3>

<br>
<div class="container">
    <div class="row">
            <h4> 这里是h4,<strong>选择器中间空格，选择从 container类继承的所有 strong 元素，而不论嵌套层次多深</strong></h4>
    </div>

    <div class="row">
        <h4><i>  >  (大于号(子元素)选择器)必须  每层都定义 才能生效</i></h4>
    </div>

    <div class="row">
        <div class="col-md4">
            <table class="table tt1">
            <tr>
                <td> 这里是tt1类的展示 </td>
            </tr>

            </table>
        </div>
            <table class="table tt1">
            <tr>
                <td class="tt2"> 这里是 td.tt2 的展示,中间无空格，背景被tt1控制 </td>
            </tr>

            </table>
        <div>
            <p style="font-weight: bold;font-size: 1.2em">通过把两个类选择器链接在一起，仅可以选择
                <span style="color: red">同时包含这些类名</span>>的元素（类名的顺序不限）。</p>

        </div>

    </div>
</div>
<div class="row">
    <div class="col-md-10 col-md-offset-2">
        <a class="W3School" href="http://w3school.com.cn">属性selector  [href="http://w3school.com.cn"]</a>
        <h2 title="">所有包含title变红色</h2>
    </div>
    <div class="col-md-6 col-md-offset-2">
        <img src="img/捕获.JPG">
    </div>
    </div>
<style type="text/css">
    [href="http://w3school.com.cn"]
    {
        font-size: 16px;
    border:5px solid red;
    }
    *[title]
        {color:red;}
</style>
</body>
</html>